<template>
	<view class="pageContainer">
		<view v-for="(item,index) in videoList" :key="index" class="videoItemContainer">
			<view class="title">
				<view class="icon">
					
				</view>
				{{vehicleNum+'-'+item.channelName}}
			</view>
			
			<video :src="item.url" controls class="videoWrapper"></video>
		</view>	
		
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import hwVehicleVideoApi from '@/api/hwVehicle/hwVehicleVideoApi'
	let that = null

	export default {
		data() {
			return {
				vehicleId: "",
				vehicleNum: "",
				videoShow: false,
				videoList:[],
			};
		},

		computed: {
			...mapState({
				sysBaseConfig: state => state.global.sysBaseConfig,
				tenantInfo: state => state.global.tenantInfo,
				carInfo: state => state.bike.carInfo
			}),
		},

		onLoad(options) {
			that = this
			console.log("options", options)
			this.vehicleId = options.vehicleId
			this.vehicleNum = decodeURIComponent(options.vehicleNum)
			this.getVideoList()
		},
		onShow() {
			
		},
		methods: {
			...mapActions(['Login', 'GetUserLoginMenu', 'GetUserInfo', 'GetDictTypeTreeData']),
			...mapMutations(['SET_tenantInfo']),
			getVideoList(){
				this.videoList.splice(0, this.videoList.length)
				for (var i = 0; i < this.carInfo.cameraNum; i++) {
					var obj = {
						channelNo: (i+1),
						url: "",
						channelName: '通道' + (i+1),
					}
					this.videoList.push(obj)
				}
				for (var i = 0; i < this.carInfo.cameraNum; i++) {
					this.getVideoDetail(i)
				}
			},
			
			getVideoDetail(index) {
				let that = this
				hwVehicleVideoApi.hwVehicleRealTimeVideo({
					vehicleId: this.vehicleId,
					channelNo: (index+1),
					streamType: 1,
				}).then((res) => {
					console.log("getVideoDetail",res)
					if (res.code ==200){
						if (res.data.url.ssl_flv && res.data.url.ssl_flv.length > 0){
							that.videoList[index].url = res.data.url.ssl_flv
							console.log("videoList", that.videoList)
						}
					}	
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContainer{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 60rpx;
	}
	.videoItemContainer{
		width: 710rpx;
		.title{
			display: flex;
			margin-left: 10rpx;
			color: #333;
			font-size: 24rpx;
			align-items: center;
			padding: 10rpx;
			.icon{
				height: 30rpx;
				width: 8rpx;
				margin-right: 15rpx;
				border-radius: 4rpx;
				background-color: #177fff;
			}
		}
		.videoWrapper{
			width: 100%;
			height: 350rpx;
			border-radius: 10rpx;
			background-color: #000;
			overflow: hidden;
		}
	}
	

</style>